<!-- 数据表单 -->
<template>
<div class="data-form-wp">
  <el-form ref="form" :inline="true" :model="form" size="small" class="this-form">
    <el-form-item label="选择日期：">
      <el-date-picker
        v-model="form.time"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :clearable="false">
      </el-date-picker>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="search">查询</el-button>
      <el-button @click="backList">返回</el-button>
    </el-form-item>
  </el-form>
  <!-- <show-card :data="cardList"></show-card> -->
  <div class="card-list">
    <div class="item lv1"  style="top: 370px;"><div>上传数据量<br/>12343432条</div></div>

    <div class="item lv2" style="top: 234px;"><div>电子病历</div><span class="top">2000条</span></div>
    <div class="item lv2" style="top: 540px;"><div>健康档案</div><span class="top">2000条</span></div>

    <div class="item lv3" style="top: 32px;"><div>EMR01病历概要</div></div>
    <div class="item lv3" style="top: 180px;"><div>EMR02门（急）诊病历</div></div>
    <div class="item lv3" style="top: 300px;"><div>EMR03急诊留观病历</div></div>
    <div class="item lv3" style="top: 390px;"><div>EMR04门（急）诊西药处方</div></div>
    <div class="item lv3" style="top: 480px;"><div>个人基本健康信息登记</div></div>
    <div class="item lv3" style="top: 540px;"><div>成人健康体检</div></div>
    <div class="item lv3" style="top: 600px;"><div>健康教育</div></div>

    <div class="item lv4" style="top: 0;"><div>emr01_WSSJ卫生事件摘要</div><span class="right">2000条</span></div>
    <div class="item lv4" style="top: 60px;"><div>emr01_JBJK基本健康信息</div><span class="right">2000条</span></div>
    <div class="item lv4" style="top: 120px;"><div>emr02门（急）诊病历（主表）</div><span class="right">2000条</span></div>
    <div class="item lv4" style="top: 180px;"><div>emr02YZ门（急）诊病历-医嘱（子表）</div><span class="right">2000条</span></div>
    <div class="item lv4" style="top: 240px;"><div>emr02JC门（急）诊病历检查（子表）</div><span class="right">2000条</span></div>
    <div class="item lv4" style="top: 300px;"><div>EMR03急诊留观病历</div><span class="right">2000条</span></div>
    <div class="item lv4" style="top: 360px;"><div>emr04门（急）诊西药处方（主表）</div><span class="right">2000条</span></div>
    <div class="item lv4" style="top: 420px;"><div>emr04_YP门（急）诊处方西药（子表）</div><span class="right">2000条</span></div>
    <div class="item lv4" style="top: 480px;"><div>T_HR_A010101个人健康档案</div><span class="right">2000条</span></div>
    <div class="item lv4" style="top: 540px;"><div>T_HR_B050101成人健康体检</div><span class="right">2000条</span></div>
    <div class="item lv4" style="top: 600px;"><div>T_HR_A010201健康教育</div><span class="right">2000条</span></div>

    <div class="line lv3" style="top: 22px;height:61px;"></div>
    <div class="line lv3" style="top: 142px;height:121px;"></div>
    <div class="line lv3" style="top: 322px;height:1px;"></div>
    <div class="line lv3" style="top: 382px;height:61px;"></div>
    <div class="line lv3" style="top: 502px;height:1px;"></div>
    <div class="line lv3" style="top: 562px;height:1px;"></div>
    <div class="line lv3" style="top: 622px;height:1px;"></div>
    <div class="line lv2" style="top: 54px;height:359px;"></div>
    <div class="line lv2" style="top: 502px;height:121px;"></div>
    <div class="line lv1" style="top: 256px;height:307px;"></div>
  </div>

</div>
</template>
<script>

import showCard from "./modules/show-card.vue";

export default {
  name: 'data-form',
  components: {
    showCard,
  },
  data () {
    return {
      form: {
        time: ['2022-02-01', '2022-02-18']
      },

      cardList: [
        {
          name: '电子病历',
          value: '2000',
          position: 'top',
          children: [
            {
              name: 'EMR01病历概要',
              children: [
                {
                  name: 'emr01_WSSJ卫生事件摘要',
                  value: '2000',
                  position: 'right'
                },
                {
                  name: 'emr01_JBJK基本健康信息',
                  value: '2000',
                  position: 'right'
                },
              ]
            },
            {
              name: 'EMR02门（急）诊病历',
              children: [
                {
                  name: 'emr02门（急）诊病历（主表）',
                  value: '2000',
                  position: 'right'
                },
                {
                  name: 'emr02YZ门（急）诊病历-医嘱（子表）',
                  value: '2000',
                  position: 'right'
                },
                {
                  name: 'emr02JC门（急）诊病历检查（子表）',
                  value: '2000',
                  position: 'right'
                },
              ]
            },
            {
              name: 'EMR03急诊留观病历',
              children: [
                {
                  name: 'EMR03急诊留观病历',
                  value: '2000',
                  position: 'right'
                },
              ]
            },
            {
              name: 'EMR04门（急）诊西药处方',
              children: [
                {
                  name: 'emr04门（急）诊西药处方（主表）',
                  value: '2000',
                  position: 'right'
                },
                {
                  name: 'emr04_YP门（急）诊处方西药（子表）',
                  value: '2000',
                  position: 'right'
                },
              ]
            }
          ]
        },
        {
          name: '健康档案',
          value: '2000',
          position: 'top',
          children: [
            {
              name: '个人基本健康信息登记',
              children: [
                {
                  name: 'T_HR_A010101个人健康档案',
                  value: '2000',
                  position: 'right'
                }
              ]
            },
            {
              name: '成人健康体检',
              children: [
                {
                  name: 'T_HR_B050101成人健康体检',
                  value: '2000',
                  position: 'right'
                }
              ]
            },
            {
              name: '健康教育',
              children: [
                {
                  name: 'T_HR_A010201健康教育',
                  value: '2000',
                  position: 'right'
                }
              ]
            },
          ]
        }
      ]
    }
  },
  mounted () {

  },
  methods: {
    search () {

    },

    backList () {
      this.$router.back();
    },
  }
}
</script>
<style lang="scss" scoped>
.data-form-wp {
  .this-form {
    padding: 0 0 22px;
  }
  .card-list {
    position: relative;
    width: 1200px;
    height: 600px;
    .item {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 10px;
      border: 1px solid #BCBCBC;
      width: 220px;
      height: 44px;
      line-height: 20px;
      text-align: center;
      &.lv1 {
        left: 0;
      }
      &.lv2 {
        left: 300px;
      }
      &.lv3 {
        left: 600px;
      }
      &.lv4 {
        left: 900px;
      }
      .top {
        position: absolute;
        top: -30px;
        left: 50%;
        margin-left: -50px;
        width: 100px;
        line-height: 30px;
        text-align: center;
      }
      .right {
        position: absolute;
        top: 50%;
        right: -115px;
        margin-top: -15px;
        width: 100px;
        height: 30px;
        line-height: 30px;
        text-align: left;
      }
      &:before, &:after {
        content: '';
        position: absolute;
        top: 50%;
        width: 40px;
        height: 1px;
        background: #BCBCBC;
      }
      &:before {
        left: -40px;
      }
      &:after {
        right: -40px;
      }
      &.lv1:before {
        display:none;
      }
      &.lv4:after {
        display: none;
      }
    }
    .line {
      position: absolute;
      width: 1px;
      background: #BCBCBC;
      &.lv3 {
        left: 860px;
      }
      &.lv2 {
        left: 560px;
      }
      &.lv1 {
        left: 260px;
      }
    }
  }
}
</style>